<template>
  <div>

     <!-- 搜索框 -->
    <mt-search
      v-model="value"
      cancel-text="取消"
      placeholder="搜索"
      @keyup.native="search($event)"
      style="height:60px"
      >
      <!-- 1.1搜索  见上两行 -->
    </mt-search>
    <div v-for="(item,index) in openProduct" :key='index'>
      <div class="rows">
        <div class="col-xs-6"  style="margin:20px 0">
          <div><img :src="`http://localhost:3000/${item.thumb[0].filename}`" width="100%" height="100px"/></div>
          <div>
            <h5>{{item.name}}</h5>
            <div class="text-left" style="color:red">￥{{item.unitPrice}}.00</div>
            <button class="text-right btn btn-primary" @click="addToCart(item)">加入购物车</button>
          </div>

        </div>
      </div>

    </div>
      <!-- {{openProduct}} -->
  </div>
</template>


<script>
  import Vue from 'vue';
  import { Search } from 'mint-ui';
  Vue.component(Search.name, Search);

  import {mapActions,mapGetters} from 'vuex';
  export default{
     data(){
      return{
           value:'',
      }
     },
    computed:{
      ...mapGetters(['openProduct']),
    },

    methods:{
      ...mapActions(['GET_PRODUCT_LIST','addToCart']),
      search(e){//1.2搜索
        var val=e.target.value;
        this.GET_PRODUCT_LIST({name:val});
      }

    },
    created(){
      this.GET_PRODUCT_LIST();
    }

  }
</script>
